<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML >
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>自测</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">

  </head>
    <script type="text/javascript" src="./js/jquery.js"></script>
  <script type="text/javascript" src="./js/common.js"></script>
<body>
	<div id="page-wrapper">
		<div class="content">
			<div class="canvas_box" style="position:relative;">
				<img id="ck_img" src="images/man_1.png" >
				<canvas id="myCanvas" onclick="vControl('GETMOUSEPOSINPIC',this)" width="800"  height="800" style="position:absolute;top:0;left:0;">
				</canvas>
			</div>
		</div>
	</div>
	
	
	<div id="createwrap" style="display:none">
	  <form id="createwrap" role="form" class="form-horizontal">
	    <div class="form-group">
	    	<label for="partName" class="col-sm-3 control-label">部位名称:</label>
	    	<div class="col-sm-8">
	      		<input class="form-control" id="partName" placeholder="请输入部位名称" onkeyup="filters(this)" onchange="filters(this)"/>
	    	</div>
	    	<br>
	    	<br>
	    </div>
	</div>
	
	<div id="checkwrap" style="display:none">
	  <form id="checkwrap" role="form" class="form-horizontal">
	    <div class="form-group">
	    	<label for="partName" class="col-sm-3 control-label">您是否发热</label>
	    	<div class="col-sm-8">
	      		<label>
		  		<input type="radio" name="inlineRadioOptions" id="yes" value="1" onkeyup="stripstript(this)" checked> 是
				</label>
				<label>
			  		<input type="radio" name="inlineRadioOptions" id="no" value="0" onkeyup="stripstript(this)"> 否
				</label>
	    	</div>
	    	<br>
	    	<br>
	    </div>
	</div>
	
</body>
<script type="text/javascript">
var sexflag = 'male';
var prosAndCons = 'pros';

$(function(){
 	$("#myCanvas").attr('width',$("img#ck_img").width());
	$("#myCanvas").attr('height',$("img#ck_img").height()); 

 	$.ajax({
       url: "<%=basePath%>partInteraction/getAllCoordinate.spring",
       data: {
           sexflag : sexflag,
           prosAndCons :prosAndCons
       },
       type: "POST",
       dataType: 'json',
       cache: false,
       success: function (ret) {
           if (ret!=null) {
               for(var i=0;i<ret.length;i++){
			 		drawPoint(ret[i].coordinate_X,ret[i].coordinate_Y,ret[i].parts);
			 	}
           }
       }
   });
 	
});

function drawPoint(x,y,part){
	var c=document.getElementById("myCanvas");
	var cxt=c.getContext("2d");
	cxt.fillStyle="#5bc0de";
	cxt.beginPath();
	cxt.arc(x,y,3,0,Math.PI*2,true);
	cxt.closePath();
	cxt.fill();
	var c=document.getElementById("myCanvas");
	var cxt=c.getContext("2d");
	cxt.fillStyle="#ffffff";
	cxt.beginPath();
	cxt.arc(x,y,2,0,Math.PI*2,true);
	cxt.closePath();
	cxt.fill();
	showPoint(x,y,part);
}

var JPos = {};  
(function($){  
    $.$getAbsPos = function(p){  
        var _x = 0;  
        var _y = 0;  
        while(p.offsetParent){  
                _x += p.offsetLeft;  
                _y += p.offsetTop;  
                p = p.offsetParent;  
        }  
          
        _x += p.offsetLeft;  
        _y += p.offsetTop;  
          
        return {x:_x,y:_y};  
    };  
      
    $.$getMousePos = function(evt){  
        var _x,_y;  
        evt = evt || window.event;  
        if(evt.pageX || evt.pageY){  
            _x = evt.pageX;  
            _y = evt.pageY;  
        }else if(evt.clientX || evt.clientY){  
            _x = evt.clientX + document.body.scrollLeft - document.body.clientLeft;  
            _y = evt.clientY + document.body.scrollTop - document.body.clientTop;  
        }else{  
            return $.$getAbsPos(evt.target);      
        }  
        return {x:_x,y:_y};  
    }  
})(JPos);  
  
function vControl(pChoice){  
    switch(pChoice){  
        case "GETMOUSEPOSINPIC":  
            var mPos = JPos.$getMousePos();  
            var iPos = JPos.$getAbsPos(arguments[1]);  
			console.log(mPos.x +"AND"+mPos.y );  
            console.log(iPos.x +"AND"+iPos.y );
            console.log(mPos.x - iPos.x);
            console.log(mPos.y - iPos.y);
            var x = mPos.x - iPos.x;  
            var y = mPos.y - iPos.y; 
            window.status = (mPos.x - iPos.x) + " " + (mPos.y - iPos.y);
            editBlank(x,y);
            break;  
    }  
}  

function showTooltip(x,y,color,contents) {
	$('<div id="tooltip">' + contents + '<div>').css({
		position: 'absolute',
		display: 'none',
		top: y-30,
		left: x-35,
		border: '1px solid ' + color,
		padding: '3px',
		'font-size': '10px',
		'border-radius': '5px',
		'background': '#fff',
		'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
	    opacity: 0.9
	}).appendTo(".canvas_box").fadeIn(200);
	
}

function showPoint(x,y,part) {
	$('<div id="point'+x+'"><div>').css({
		position: 'absolute',
		display: 'none',
		top: y-5,
		left: x-5,
		border: '1px solid ' + '#9bc0de',
		padding: '3px',
		'border-radius': '5px',
		'background': '#fff',
		'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
	    opacity: 0.9
	}).appendTo(".canvas_box").fadeIn(200);
	
// 	$('#point'+x+'').on('mouseover',function(){
// 	    $('#point'+x+'').css("background-color","yellow");
// 	    showTooltip(x,y,"#5bc0de",part);
// 	});
	
// 	$('#point'+x+'').on('mouseout',function(){
// 	    $('#point'+x+'').css("background-color","white");
// 	    var my = document.getElementById("tooltip");
// 	    if (my != null){
//         	my.parentNode.removeChild(my);
//         }
// 	});
	
// 	$('#point'+x+'').click(function(){
// 		var my = document.getElementById("tooltip");
// 	    if (my != null){
//         	my.parentNode.removeChild(my);
//         }
// 	    editPoint(x,y,part);
// 	});
}



function getIllByparts(partName){
	$.ajax({
         url: "./illOper/getIllByparts.spring",
         data: {
             parts: partName
         },
         type: "POST",
         dataType: 'json',
         cache: false,
         success: function (ret) {
             if(ret!=null){
             	getSymptomsByillList(ret.ids)
             }
         }
     });
}

function getSymptomsByillList(ids){
	$.ajax({
         url: "./illOper/getSymptomsByillList.spring",
         data: {
             ids: ids
         },
         type: "POST",
         dataType: 'json',
         cache: false,
         success: function (ret) {
             if(ret!=null){
             	checkill(ret.symptom,ret.ids);
             }
         }
     });
}

//编辑空白
function editBlank(x,y){
	$.messager.model = { 
	   	ok:{ text: "确定", classed: 'btn-success' },
	    cancel:{text:"取消",classed: 'btn-danger' }
	};
	$.messager.confirm("确认操作", "确定新增部位?", function() {
		createCoordinate(x,y);
	});
}

function createCoordinate(x,y){
	$("#createwrap").show();
	$("#createwrap").dialog({
         	title   : "新增部位",
        	'class' :  "mydialog",
        	onClose : function() { 
         		$(this).dialog("close");
          	}, 
          	buttons : [{
          		text : "提交",
          		'class' : "btn btn-primary",
             	click : function() {
             		var part = $("#partName").val();
             		
                    $.ajax({
                     url: "./partInteraction/saveCoordinate.spring",
                     data: {
                         part: part,
                         sexflag: sexflag,
                         prosAndCons: prosAndCons,
                         coordinate_X : x,
                         coordinate_Y : y
                     },
                     type: "POST",
                     dataType: 'json',
                     cache: false,
                     success: function (ret) {
                         if(ret.resultCode==1){
                         	window.location = "./jsp/illness/bodysimulation.jsp";
                         }
                     }
                 });
             	}
             },{
             text : "关闭",
             'class' : "btn btn-default",
             click : function() {
                	 $(this).dialog("close");
             	}
         }]
     });
}

function checkill(symptom,ids){
	$("#checkwrap").show();
	$("#checkwrap").dialog({
         	title   : "问题",
        	'class' :  "mydialog",
        	onClose : function() { 
         		$(this).dialog("close");
          	}, 
          	buttons : [{
          		text : "提交",
          		'class' : "btn btn-primary",
             	click : function() {
                    $.ajax({
                     url: "./illOper/getIllByparts.spring",
                     data: {
                         symptom: symptom,
                         ids : ids
                     },
                     type: "POST",
                     dataType: 'json',
                     cache: false,
                     success: function (ret) {
                         if(ret.resultCode==1){
                         	window.location = "./jsp/illness/bodysimulation.jsp";
                         }
                     }
                 });
             	}
             },{
             text : "关闭",
             'class' : "btn btn-default",
             click : function() {
                	 $(this).dialog("close");
             	}
         }]
     });
}
</script>
</html>
